<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小滴课堂</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./index.css" />
    <script src="http://at.alicdn.com/t/c/font_4821458_806jw2yklrh.js"></script>
  </head>

  <body>
    <!-- 整个项目 -->
    <div class="online-education">
      <!-- 顶部图片 -->
      <div class="header_img">
        <img src="./img/hd.jpg" alt="" />
      </div>
      <!-- 头部导航 -->
      <div class="header_nav">
        <!-- 导航左边部分 -->
        <div class="nav_left">
          <img src="./img/title.png" alt="" />
          <div>首页</div>
          <div>课程中心</div>
          <div>
            超级会员
            <i>hot</i>
          </div>
          <div>
            学习路线
            <i>hot</i>
          </div>
          <div>
            一对一辅导
            <i>hot</i>
          </div>
          <div>工具</div>
          <div>回答论坛</div>
          <input type="text" />
          <svg class="sousuo" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </div>
        <!-- 导航右边部分 -->
        <div class="nav_right">
          <div>
            课程骨折
            <i>hot</i>
          </div>
          <div>
            云服务器
            <i>hot</i>
          </div>
          <div>课程兑换码</div>
          <div>
            <svg class="vip" aria-hidden="true">
              <use xlink:href="#icon-VIP"></use>
            </svg>
          </div>
          <div>我的学习</div>
          <div>
            <img src="./img/user.png" alt="" class="right_img" />
          </div>
        </div>
      </div>

      <!-- 首页轮播图 -->
      <div class="banner">
        <!-- 轮播图左侧区域 -->
        <div class="banner_left">
          <div class="left_item">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="left_item">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="left_item">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="left_item">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="left_item">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="left_item">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="left_item">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
        </div>
        <!-- 轮播图右侧区域 -->
        <div class="banner_right">
          <img src="./img/banner.jpg" alt="" />
        </div>
      </div>

      <!-- 首页热门课程 -->
      <div class="hot_list">
        <!-- 热门课程标题 -->
        <div class="list_title">
          <div class="hot_text">热门课程</div>
          <div class="hot_eng">Hot Courses</div>
        </div>
        <!-- 热门课程模块 -->
        <div class="list_content">
          <!-- 单个课程模块 -->
          <div class="content_item">
            <!-- 课程图片 -->
            <div class="item_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <!-- 课程整体介绍 -->
            <div class="item_text">
              <!-- 课程标题 -->
              <div class="item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <!-- 课程其他介绍-级别、火热程度 -->
              <div class="jibie">
                <div>级别: 高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <!-- 课程其他介绍-、价格、人数 -->
              <div class="item_number">
                <div class="num_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <div class="mun_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
          <div class="content_item">
            <!-- 课程图片 -->
            <div class="item_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <!-- 课程整体介绍 -->
            <div class="item_text">
              <!-- 课程标题 -->
              <div class="item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <!-- 课程其他介绍-级别、火热程度 -->
              <div class="jibie">
                <div>级别: 高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <!-- 课程其他介绍-、价格、人数 -->
              <div class="item_number">
                <div class="num_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <div class="mun_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
          <div class="content_item">
            <!-- 课程图片 -->
            <div class="item_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <!-- 课程整体介绍 -->
            <div class="item_text">
              <!-- 课程标题 -->
              <div class="item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <!-- 课程其他介绍-级别、火热程度 -->
              <div class="jibie">
                <div>级别: 高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <!-- 课程其他介绍-、价格、人数 -->
              <div class="item_number">
                <div class="num_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <div class="mun_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
          <div class="content_item">
            <!-- 课程图片 -->
            <div class="item_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <!-- 课程整体介绍 -->
            <div class="item_text">
              <!-- 课程标题 -->
              <div class="item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <!-- 课程其他介绍-级别、火热程度 -->
              <div class="jibie">
                <div>级别: 高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <!-- 课程其他介绍-、价格、人数 -->
              <div class="item_number">
                <div class="num_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <div class="mun_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分隔线 -->
      <div class="split_line"></div>

      <!-- 首页最新课程 -->
      <div class="new_list">
        <!-- 最新课程标题 -->
        <div class="list_title">
          <div class="hot_text">最新课程</div>
          <div class="hot_eng">New Courses</div>
        </div>
        <!-- 最新课程模块 -->
        <div class="new_list_con">
          <!-- 左侧课程图 -->
          <div class="list_content">
            <div class="content_item">
              <div class="item_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="item_text">
                <div class="item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="item_jibie">
                  <div>级别: 高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="item_number">
                  <div class="num_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <div class="mun_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
              <div class="feel">会员免费</div>
            </div>
            <div class="content_item">
              <div class="feel">会员免费</div>
              <div class="item_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="item_text">
                <div class="item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="item_jibie">
                  <div>级别: 高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="item_number">
                  <div class="num_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <div class="mun_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_item">
              <div class="item_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="item_text">
                <div class="item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="item_jibie">
                  <div>级别: 高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="item_number">
                  <div class="num_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <div class="mun_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_item">
              <div class="item_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="item_text">
                <div class="item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="item_jibie">
                  <div>级别: 高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="item_number">
                  <div class="num_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <div class="mun_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_item">
              <div class="item_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="item_text">
                <div class="item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="item_jibie">
                  <div>级别: 高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="item_number">
                  <div class="num_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <div class="mun_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_item">
              <div class="item_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="item_text">
                <div class="item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="item_jibie">
                  <div>级别: 高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="item_number">
                  <div class="num_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <div class="mun_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧图片 -->
          <div class="new_list_img">
            <img src="./img/new_img.jpeg" alt="" />
          </div>
        </div>
      </div>
      <!-- 首页底部 -->
      <div class="foot">
        <!-- 图标 -->
        <div class="foot_icon">
            <svg class="icon_item" aria-hidden="true">
                <use xlink:href="#icon-weibo"></use>
            </svg>
            <svg class="icon_item" aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
            </svg>
            <svg class="icon_item" aria-hidden="true">
                <use xlink:href="#icon-qq"></use>
            </svg>
        </div>
        <!-- 中文汉字 -->
        <div class="foot_text">
            <div class="text_item">关于我们</div>
            <div class="text_item">关于我们</div>
            <div class="text_item">关于我们</div>
            <div class="text_item">关于我们</div>
            <div class="text_item">关于我们</div>
            <div class="text_item">关于我们</div>
        </div>
        <!-- 英文汉字 -->
        <div class="foot_eng">
            Copyright © 2018 Company,lnc.粤ICP备15092968号 Trems
        </div>
      </div>
    </div>
  </body>
</html>
